<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Title</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <style>
    body {
      background-color: #f8f9fa;
      padding: 20px;
    }
    .login-container {
      max-width: 500px;
      margin: 50px auto;
      padding: 30px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 1.5rem;
    }
    .btn-primary {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="login-container">
    <form action="/Login/validate" method="get" id="loginForm">
      <div class="form-group">
        <label for="username">Username/用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="email">Email address/邮箱地址</label>
        <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="password">Password/密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
      </div>
      <div class="form-group">
        <label for="gender">Gender/性别</label>
        <select class="form-control" id="gender" name="gender">
          <option value="男">Male/男</option>
          <option value="女">Female/女</option>
        </select>
      </div>
      <div class="form-group">
        <label for="clazz">Class/班级</label>
        <input type="text" class="form-control" id="clazz" name="clazz" placeholder="Example: 13软件1">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="agreeCheck">
        <label class="form-check-label" for="agreeCheck">Check me out/勾选确认</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit/提交</button>
    </form>
  </div>
  <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script>
    // 表单提交处理
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      // 移除之前的localStorage逻辑，让后端处理
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      if (!username || !password) {
        e.preventDefault();
        alert('用户名和密码为必填项！/ Username and password are required!');
      }
      // 表单会正常提交到 /Login/validate，由后端处理跳转
    });
  </script>
</body>
</html>